<template>
    <view class="select_job_input_cp">
        <u-input 
            v-model="job" 
            type="select" 
            @click="show = true"
            placeholder="请选择职业"/>
        <u-select 
            v-model="show" 
            :list="jobList" 
            @confirm="confirm">
        </u-select>
    </view>
</template>

<script>
//职业选择input组件
export default {
    name:"SelectJobInputCp",
    props:{
        value:{
            type:String,
            default:'',
        },
    },
    data() {
        return {
            show: false,
            jobList: [
                {
                    value: '1',
                    label: '工人'
                },
                {
                    value: '2',
                    label: '农民',
                },
                {
                    value: '3',
                    label: '医生',
                },
                {
                    value: '4',
                    label: '教师',
                },
                {
                    value: '5',
                    label: '学生',
                },
                {
                    value: '6',
                    label: '职工',
                },
                {
                    value: '7',
                    label: '其他',
                },
            ],
        }
    },
    computed:{
        job:{
            get(){
                return this.value;
            },
            set(value){
                this.$emit('input',value);
            },
        },
    },
    methods:{
        confirm(e) { //确定按钮点击事件
            this.job = e[0].label;
        }
    },
}
</script>

<style lang="scss" scoped>
.select_job_input_cp {
    text-align: center;
    width: 100%;
    /deep/.u-input{
        width: 100%;
    }
}
</style>
